<script setup defer async lang="ts">
import { reactive, onMounted, ref } from 'vue'
import { bindWsList } from '@/api/user'
import { useI18n } from 'vue-i18n'
import { formatDate } from '@/utils/utils'
import { useSwipeHandlers } from '@/utils/useSwipeHandlers'

const { t } = useI18n()


interface WhatsAppItem {
  phone: string
  ws_status: number
  updated_time: string
  online_time: number
}

const baseData = reactive({
  condition: [0, 0],
  loading: false,
  page: 1,
  total: 0,
  dataList: [] as WhatsAppItem[],
  aircraftUrl: uni.getStorageSync('aircraftUrl'),
})

const leftClick = () => {
  const pages = getCurrentPages()
  if (pages.length <= 1) {
    history.back()
  } else {
    uni.navigateBack()
  }
}

const getHour = (seconds: number) => {
  const hours = Math.floor(seconds / 3600)
  const minutes = Math.floor((seconds % 3600) / 60)

  
  const formattedMinutes = minutes < 10 ? `0${minutes}` : minutes

  if (hours > 0) {
    return `${hours} ${t('Hour')} ${formattedMinutes} ${t('min')}`
  } else {
    return `${formattedMinutes} ${t('min')}`
  }
}

const getList = async () => {
  baseData.loading = true
  uni.showLoading({
    title: t('Loading'),
    icon: 'none',
  })
  try {
    const res = await bindWsList()
    if (res.code === 0) {
      baseData.total = res.data.total
      if (res.data.length > 0) {
        baseData.dataList = baseData.dataList.concat(res.data)
        baseData.page++
      }
    } else {
      uni.showToast({
        title: res.msg,
        icon: 'none',
      })
    }
  } catch (error) {
    console.error( error)
    uni.showToast({
      title: 'error',
      icon: 'none',
    })
  } finally {
    baseData.loading = false
    uni.hideLoading()
  }
}


const handleSwipeRight = () => {
  const pages = getCurrentPages()
  if (pages.length <= 1) {
    history.back()
  } else {
    uni.navigateBack()
  }
}

useSwipeHandlers(handleSwipeRight)

onMounted(() => {
  
  uni.setNavigationBarTitle({
    title: 'Studio ' + t('Earn money so easy') + '!', 
  })
  getList()
})
</script>

<template>
  <view class="whatsapp-container">
<up-navbar :title="t('Bound WhatsApp number')" @click="leftClick" :autoBack="true">
						<template #left>
						  <view class="nav-back-btn">
						    <image class="back-icon" src="../../../static/img/left.png"></image>
						  </view>
						</template>
					</up-navbar>

    
    <view class="accounts-section">
      <view class="section-header">
        <text class="section-title">{{t('Bound Accounts')}}</text>
        <text class="section-subtitle">{{t('Manage your WhatsApp connections')}}</text>
      </view>

      <view class="accounts-list">
        <view 
          v-for="(item, index) in baseData.dataList" 
          :key="index"
          class="account-card"
        >
          <view class="card-header">
            <view class="account-icon">
              <image class="icon-image" src="@/static/img/WhatsApp.png" mode="aspectFit"></image>
            </view>
            <view class="account-info">
              <text class="phone-number">{{ item.phone }}</text>
              <view class="status-badge" :class="item.ws_status === 1 ? 'online' : 'offline'">
                <view class="status-dot"></view>
                <text class="status-text">{{ item.ws_status === 1 ? t('Online') : t('Offline') }}</text>
              </view>
            </view>
          </view>

          <view class="card-details">
            <view class="detail-item">
              <text class="detail-label">{{ t('Last Update') }}</text>
              <text class="detail-value">{{ item.updated_time.split('.')[0].replace('T', ' ') }}</text>
            </view>
            <view class="detail-item">
              <text class="detail-label">{{ t('Online Duration') }}</text>
              <text class="detail-value duration">{{ getHour(item.online_time) }}</text>
            </view>
          </view>
        </view>

        
        <view v-if="!baseData.loading && baseData.dataList.length === 0" class="empty-state">
          <view class="empty-icon">
            <img src="@/static/img/empty120.png" mode="aspectFit" />
          </view>
          <text class="empty-title">No WhatsApp Accounts</text>
          <text class="empty-subtitle">Connect your WhatsApp to start earning</text>
        </view>

        
        <view v-if="baseData.loading" class="loading-state">
          <view class="loading-spinner"></view>
          <text class="loading-text">{{ t('Loading') }}</text>
        </view>

        
        <view v-if="!baseData.loading && baseData.dataList.length > 0" class="list-end">
          <text class="end-text">{{ t('Reached the End') }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.whatsapp-container {
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  position: relative;
}






.accounts-section {
	background-image: url("@/static/img/record_top.png");
	    background-size: 100% 100%;
  padding: 30px 10px;
  margin-top: 20px;
  .section-header {
    margin-bottom: 15px;
    
    .section-title {
      display: block;
      font-size: 20px;
      font-weight: 700;
      color: #333;
      margin-bottom: 8px;
    }
    
    .section-subtitle {
      display: block;
      font-size: 14px;
      color: #666;
      font-weight: 500;
    }
  }
  
  .accounts-list {
    .account-card {
      background: #ffffff;
      border: 1px solid #e0e0e0;
      padding: 10px;
      margin-bottom: 6px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      transition: all 0.3s ease;

      .card-header {
        display: flex;
        align-items: center;
        margin-bottom: 16px;
        
        .account-icon {
          width: 50px;
          height: 50px;
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 15px;
          
          .icon-image {
            width: 24px;
            height: 24px;
          }
        }
        
        .account-info {
          flex: 1;
          
          .phone-number {
            display: block;
            font-size: 16px;
            font-weight: 600;
            color: #333;
            margin-bottom: 6px;
          }
          
          .status-badge {
            display: flex;
            align-items: center;
            gap: 6px;
            
            .status-dot {
              width: 8px;
              height: 8px;
              border-radius: 50%;
            }
            
            .status-text {
              font-size: 12px;
              font-weight: 600;
              letter-spacing: 0.5px;
            }
            
            &.online {
              .status-dot {
                background: #25D366;
              }
              .status-text {
                color: #25D366;
              }
            }
            
            &.offline {
              .status-dot {
                background: #999;
              }
              .status-text {
                color: #999;
              }
            }
          }
        }
      }
      
      .card-details {
        border-top: 1px solid #f0f0f0;
        padding-top: 16px;
        
        .detail-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 8px;
          
          &:last-child {
            margin-bottom: 0;
          }
          
          .detail-label {
            font-size: 13px;
            color: #666;
            font-weight: 500;
          }
          
          .detail-value {
            font-size: 13px;
            color: #333;
            font-weight: 600;
            
            &.duration {
              color: #25D366;
            }
          }
        }
      }
    }
    
    .empty-state {
      text-align: center;
      padding: 60px 20px;
      
      .empty-icon {
        margin-bottom: 20px;
        
        img {
          width: 60px;
          height: 60px;
          opacity: 0.5;
        }
      }
      
      .empty-title {
        display: block;
        font-size: 18px;
        font-weight: 600;
        color: #333;
        margin-bottom: 8px;
      }
      
      .empty-subtitle {
        display: block;
        font-size: 14px;
        color: #666;
        line-height: 1.5;
      }
    }
    
    .loading-state {
      text-align: center;
      padding: 40px 20px;
      
      .loading-spinner {
        width: 24px;
        height: 24px;
        border: 2px solid #e0e0e0;
        border-top: 2px solid #25D366;
        border-radius: 50%;
        animation: spin 1s linear infinite;
        margin: 0 auto 12px;
      }
      
      .loading-text {
        font-size: 14px;
        color: #666;
        font-weight: 500;
      }
    }
    
    .list-end {
      text-align: center;
      padding: 30px 20px;
      
      .end-text {
        font-size: 14px;
        color: #999;
        font-weight: 500;
      }
    }
  }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>